<script setup lang="ts">
import { usePresetStore } from '@renderer/store/pinia/preset'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import routesConstants from '@renderer/routers/routeConstants'
import API from '@renderer/api/constant'
import { post, postWithAns } from '@renderer/api/http'
import { socketIo } from '@renderer/views/home/init'

const wantEnterModeRef = ref('')
socketIo.connect()

const presetStore = usePresetStore() as any
const hasTransport = computed(() => presetStore.presetConfig.hasTransport)
const router = useRouter()
const modelArr = computed(() => {
  if (hasTransport.value) {
    return ['move', 'scan', 'service']
  } else {
    return ['scan', 'service']
  }
})
const showConfirmEnterModeRef = ref(false)

const modeAPIMap = {
  'scan': {
    api: API.enterScanMode,
    nextPage: routesConstants.PatientsPage.path
  },
  'move': {
    api: API.enterTransportMode,
    nextPage: ''
  },
  'service': {
    api: API.enterServiceMode,
    nextPage: routesConstants.SERVICE_CHOOSE.path
  }
}

const handleConfirmEnter = async () => {
  const { api, nextPage } = modeAPIMap[wantEnterModeRef.value]
  await postWithAns(api, async () => {
    await router.push(nextPage)
  }, null)
}
const handleCancelEnter = () => {
  wantEnterModeRef.value = ''
  showConfirmEnterModeRef.value = false
}

const handleChooseMode = (mode) => {
  wantEnterModeRef.value = mode
  showConfirmEnterModeRef.value = true
}


</script>

<template>
  <div class="w-full h-full pt-[50px] px-[30px]">
    <h1 class="text-5xl text-center capitalize mb-[20px]">welcome</h1>
    <div class="w-full h-[200px] flex">
      <div v-for="item in modelArr"
           :key="item"
           @click="handleChooseMode(item)"
           class="flex-1 border">
        {{ item }}
      </div>
    </div>
  </div>

  <el-dialog
    v-model="showConfirmEnterModeRef"
    title="Tips"
    width="500"
    :before-close="handleCancelEnter"
  >
    <span class="text-xl">确定进入 {{ wantEnterModeRef }}模式?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancelEnter">Cancel</el-button>
        <el-button type="primary" @click="handleConfirmEnter">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
